<template>
  <template v-for="item in leftActions" :key="item.label">
    <el-button
      v-if="checkShow(item)"
      :type="item.type"
      @click="item.fn"
      v-bind="item.itemProps"
      v-hasPermi="item?.permission"
    >
      <svg-icon
        v-if="item?.icon"
        :icon-class="item?.icon"
        class="mr-[2px] text-[14px]"
        :style="item?.iconStyle"
      />
      <i v-if="item?.dkicon" class="dk-iconfont" :class="item?.dkicon" />
      {{ item.label }}
    </el-button>
  </template>
  <slot name="left"></slot>
  <slot name="right"></slot>
  <template v-for="(item, ind) in rightActions" :key="item.label">
    <el-button
      v-if="checkShow(item)"
      :type="item.type"
      @click="item.fn"
      :class="{ 'ml-auto': !hasNonRightSlot && ind == 0 }"
      v-bind="item.itemProps"
      v-hasPermi="item?.permission"
    >
      <svg-icon
        v-if="item?.icon"
        :icon-class="item?.icon"
        class="mr-[2px] text-[14px]"
        :style="item?.iconStyle"
      />
      <i v-if="item?.dkicon" class="dk-iconfont" :class="item?.dkicon" />
      {{ item.label }}
    </el-button>
  </template>
</template>

<script setup>
  const props = defineProps({
    actions: { type: Array, default: () => [] },
    icon: { type: String, default: "" },
  });
  let hasNonRightSlot = computed(() => {
    const slotNames = Object.keys(useSlots());
    return slotNames.some((slotName) => slotName == "right");
  });
  const { actions = [] } = toRefs(props);
  const leftActions = computed(() => {
    return actions.value?.filter((n) => !n.right || n.left);
  });

  const rightActions = computed(() => {
    return actions.value?.filter((n) => !!n.right);
  });

  const checkShow = (item) => {
    const { show } = item;
    return show ? show?.(item) : true;
  };
</script>
